شرح العنصر (table) في HTML

دليل شامل عن عنصر <table> في HTML

HTML CSS

مقدمة عن الجداول في HTML

العنصر <table> في HTML يُستخدم لإنشاء جداول لعرض البيانات بطريقة منظمة ومرتبة في صفوف وأعمدة. الجداول مفيدة لعرض المعلومات مثل الجداول الزمنية، قوائم الأسعار، نتائج الامتحانات، وغيرها من البيانات المجدولة.

تُبنى الجداول في HTML باستخدام مجموعة من العناصر المتداخلة، أهمها:

• <table>: الحاوية الرئيسية للجدول.
• <tr>: يُعرّف صفًا (Table Row).
• <td>: يُعرّف خلية بيانات (Table Data).
• <th>: يُعرّف خلية عنوان (Table Header).

البنية الأساسية للجدول

<table>
  <tr>
    <th>العنوان 1</th>
    <th>العنوان 2</th>
  </tr>
  <tr>
    <td>بيانات 1</td>
    <td>بيانات 2</td>
  </tr>
</table>

العنوان 1	العنوان 2
بيانات 1	بيانات 2

العناصر الأساسية للجدول

1 <table>

• العنصر الرئيسي الذي يحوي جميع مكونات الجدول.
• يُستخدم لتحديد بداية ونهاية الجدول.

2 <tr> (Table Row)

• يُعرّف صفًا داخل الجدول.
• كل <tr> يحتوي على خلايا (<td> أو <th>).

3 <td> (Table Data)

• يُعرّف خلية عادية تحتوي على بيانات.
• يمكن أن تحتوي على نصوص، صور، روابط، أو أي عناصر HTML أخرى.

4 <th> (Table Header)

• يُعرّف خلية عنوان (مثل عناوين الأعمدة أو الصفوف).
• النص داخل <th> يكون غامقًا ومحاذيًا إلى الوسط تلقائيًا.

عناصر إضافية لتحسين الجدول

1 <caption>

يُستخدم لإضافة عنوان وصفي للجدول.

<table>
  <caption>جدول رواتب الموظفين</caption>
  <tr>
    <th>الاسم</th>
    <th>الراتب</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>5000</td>
  </tr>
</table>

2 <thead>, <tbody>, <tfoot>

تُستخدم لتجميع أقسام الجدول:

• <thead>: رأس الجدول (يحتوي عادةً على العناوين).
• <tbody>: جسم الجدول (يحتوي على البيانات الرئيسية).
• <tfoot>: ذيل الجدول (يحتوي على ملخصات مثل المجاميع).

<table>
  <thead>
    <tr>
      <th>الاسم</th>
      <th>الدرجة</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>محمد</td>
      <td>90</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>المجموع</td>
      <td>90</td>
    </tr>
  </tfoot>
</table>

3 colspan و rowspan

• colspan: دمج خلايا أفقياً عبر عدة أعمدة.
• rowspan: دمج خلايا عمودياً عبر عدة صفوف.

مثال:

<table border="1">
  <tr>
    <th colspan="2">الاسم الكامل</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>علي</td>
    <td rowspan="2">25</td>
  </tr>
  <tr>
    <td>محمد</td>
    <td>خالد</td>
  </tr>
</table>

الاسم الكامل		العمر
أحمد	علي	25
محمد	خالد

تنسيق الجداول باستخدام CSS

يمكن تخصيص مظهر الجدول باستخدام CSS لجعله أكثر جاذبية:

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: right;
}

th {
  background-color: #f2f2f2;
  color: #333;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #e6f7ff;
}

استخدامات الجداول في الويب الحديث

• عرض البيانات المجدولة: مثل الجداول المالية، جداول المواعيد.
• المقارنات: مثل مقارنة منتجات أو خدمات.
• الاستمارات المعقدة: في بعض الأحيان تُستخدم الجداول لتنظيم حقول النماذج.

ملاحظة مهمة! في الماضي، كانت الجداول تُستخدم لتصميم تخطيط الصفحة بالكامل، لكن هذه الممارسة أصبحت غير موصى بها بسبب:

• صعوبة التكيف مع الشاشات المختلفة (Responsive Design).
• تعقيد الصيانة والتحديث.
• مشاكل في إمكانية الوصول (Accessibility).

يُنصح اليوم باستخدام Flexbox و CSS Grid لتصميم الهيكل العام للصفحة، والاحتفاظ بالجداول فقط لعرض البيانات المجدولة.

الخلاصـــة

عنصر <table> في HTML أداة قوية لعرض البيانات المنظمة، ويجب استخدامه بطريقة صحيحة لتحسين تجربة المستخدم وسهولة الوصول. من خلال فهم العناصر الأساسية (<tr>, <td>, <th>) والخصائص الإضافية مثل colspan و rowspan، يمكنك إنشاء جداول واضحة وفعالة.

يُفضل دائمًا تحسين الجداول باستخدام CSS لجعلها متجاوبة وسهلة القراءة على جميع الأجهزة.

كيف كان المقال؟